{% extends "base.html" %}

{% block title %}首页 - 梦幻西游数字资产管理系统{% endblock %}

{% block mobile_title %}首页{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="mb-4">📊 今日概览</h2>
        </div>
    </div>
    
    <!-- 统计卡片 -->
    <div class="row mb-4" id="statsCards">
        <div class="col-6 col-md-3 mb-3">
            <div class="stat-card">
                <i class="bi bi-person-circle stat-icon"></i>
                <div class="stat-value" id="accountCount">-</div>
                <div class="stat-label">总账号数</div>
            </div>
        </div>
        <div class="col-6 col-md-3 mb-3">
            <div class="stat-card">
                <i class="bi bi-people stat-icon"></i>
                <div class="stat-value" id="roleCount">-</div>
                <div class="stat-label">总角色数</div>
            </div>
        </div>
        <div class="col-6 col-md-3 mb-3">
            <div class="stat-card">
                <i class="bi bi-list-check stat-icon"></i>
                <div class="stat-value" id="completionRate">-</div>
                <div class="stat-label">今日完成率</div>
            </div>
        </div>
        <div class="col-6 col-md-3 mb-3">
            <div class="stat-card">
                <i class="bi bi-gem stat-icon"></i>
                <div class="stat-value" id="totalAssets">-</div>
                <div class="stat-label">总资产(亿)</div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- 今日任务 -->
        <div class="col-lg-8 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-list-task me-2"></i>今日待完成任务</span>
                    <a href="/tasks" class="btn btn-sm btn-primary">查看全部</a>
                </div>
                <div class="card-body">
                    <div id="taskList">
                        <div class="loading">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2">加载中...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 快捷操作 -->
        <div class="col-lg-4 mb-4">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-lightning me-2"></i>快捷操作
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="/accounts" class="btn btn-outline-primary">
                            <i class="bi bi-plus-circle me-2"></i>添加账号
                        </a>
                        <a href="/roles" class="btn btn-outline-primary">
                            <i class="bi bi-person-plus me-2"></i>添加角色
                        </a>
                        <a href="/tasks" class="btn btn-outline-primary">
                            <i class="bi bi-check-circle me-2"></i>任务打卡
                        </a>
                        <a href="/statistics" class="btn btn-outline-primary">
                            <i class="bi bi-bar-chart me-2"></i>查看统计
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 系统提醒 -->
            <div class="card mt-3">
                <div class="card-header">
                    <i class="bi bi-bell me-2"></i>系统提醒
                </div>
                <div class="card-body">
                    <div class="alert alert-warning" role="alert">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                        今日还有 <strong id="pendingTasks">0</strong> 个任务未完成
                    </div>
                    <div class="alert alert-info" role="alert">
                        <i class="bi bi-info-circle-fill me-2"></i>
                        系统运行正常，数据已实时更新
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    loadStatistics();
    loadTodayTasks();
    
    // 每30秒刷新一次数据
    setInterval(function() {
        loadStatistics();
        loadTodayTasks();
    }, 30000);
});

// 加载统计数据
async function loadStatistics() {
    try {
        const data = await apiRequest('/api/statistics/overview');
        
        $('#accountCount').text(data.data.account_count);
        $('#roleCount').text(data.data.role_count);
        $('#completionRate').text(data.data.today_completion_rate + '%');
        $('#totalAssets').text((data.data.total_money / 100000000).toFixed(1));
        $('#pendingTasks').text(data.data.total_tasks - data.data.completed_tasks);
    } catch (error) {
        console.error('加载统计数据失败:', error);
    }
}

// 加载今日任务
async function loadTodayTasks() {
    try {
        const data = await apiRequest('/api/tasks');
        const tasks = data.data;
        
        if (tasks.length === 0) {
            $('#taskList').html(`
                <div class="empty-state">
                    <i class="bi bi-inbox"></i>
                    <p>今日暂无任务</p>
                    <a href="/tasks" class="btn btn-primary">创建任务</a>
                </div>
            `);
            return;
        }
        
        let html = '<div class="list-group list-group-flush">';
        tasks.slice(0, 5).forEach(task => {
            const iconClass = task.is_completed ? 'bi-check-circle-fill text-success' : 'bi-circle';
            html += `
                <div class="list-group-item">
                    <div class="row align-items-center">
                        <div class="col-1">
                            <i class="bi ${iconClass} fs-5"></i>
                        </div>
                        <div class="col-7 col-md-8">
                            <div class="fw-bold">${task.role_name} - ${task.task_type}</div>
                            <small class="text-muted">${task.account_name}</small>
                        </div>
                        <div class="col-4 col-md-3 text-end">
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-primary" style="width: ${task.progress}%"></div>
                            </div>
                            <small class="text-muted">${task.completed_count}/${task.target_count}</small>
                        </div>
                    </div>
                </div>
            `;
        });
        html += '</div>';
        
        $('#taskList').html(html);
    } catch (error) {
        console.error('加载任务列表失败:', error);
        $('#taskList').html(`
            <div class="empty-state">
                <i class="bi bi-exclamation-circle text-danger"></i>
                <p>加载失败，请刷新重试</p>
            </div>
        `);
    }
}
</script>
{% endblock %}

